<template>
	<view>
		<!-- 自定义导航 -->
		<uni-nav-bar left-icon="back" rightIcon="help" title="我的收益" @clickLeft="backTo()" statusBar>
			<view slot="default" style="width: 100%;vertical-align: middle;">
				<uni-segmented-control
					activeColor="#ff604f"
					:current="current"
					:values="items"
					@clickItem="tabTo($event)"
				></uni-segmented-control>
			</view>
		</uni-nav-bar>
		<!-- 选项卡内容 -->
		<view class="content">
			<!-- 选项卡1的内容 -->
			<view v-show="current === 0" class="earning">
				<view>{{integral}}</view>
				<view>金币明细 ></view>
				<view @click="toFuli()">赚金币</view>
			</view>
			<!-- 选项卡2的内容 -->
			<view v-show="current === 1" class="earning">
				<view>0</view>
				<view>现金明细 ></view>
				<view>兑换现金</view>
			</view>
		</view>
		<!-- 特权 -->
		<view class="privilege">
			<view>免广告特权</view>
			<view>
				<!-- 1 -->
				<view class="coupon">
					<view class="left">
						<view class="message-left">
							<image src="../../static/1h.png" mode="widthFix"></image>
							<view>
								<view>免一小时广告券</view>
								<view>还剩2000件</view>
							</view>
						</view>
					</view>
					<view class="right">
						<view class="message-right">
							<view>300金币</view>
							<view>兑换</view>
						</view>
					</view>
				</view>
				<!-- 2 -->
				<view class="coupon">
					<view class="left">
						<view class="message-left">
							<image src="../../static/1d.png" mode="widthFix"></image>
							<view>
								<view>免一天广告券</view>
								<view>还剩2000件</view>
							</view>
						</view>
					</view>
					<view class="right">
						<view class="message-right">
							<view>3000金币</view>
							<view>兑换</view>
						</view>
					</view>
				</view>
				<!-- 3 -->
				<view class="coupon">
					<view class="left">
						<view class="message-left">
							<image src="../../static/7d.png" mode="widthFix"></image>
							<view>
								<view>免七天广告券</view>
								<view>还剩2000件</view>
							</view>
						</view>
					</view>
					<view class="right">
						<view class="message-right">
							<view>12000金币</view>
							<view>兑换</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			current: 0,
			items: ['金币收益', '现金收益']
		};
	},
	computed:{
		integral(){
			return this.$store.state.user.integral
		}
	},
	methods: {
		// 跳转福利页面
		toFuli(){
			uni.switchTab({
				url:'../fuli/fuli'
			})
		},
		// 返回
		backTo() {
			uni.navigateBack({
				delta: 1
			});
		},
		// 选项卡
		tabTo(e) {
			this.current = e.currentIndex;
			console.log(e);
		}
	}
};
</script>

<style lang="scss" scoped>
/deep/.uni-navbar__header-container {
	align-items: center;
}
.content {
	padding: 40rpx;
	height: 280rpx;
	// box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
	.earning {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		> view:first-child {
			font-size: 60rpx;
			font-weight: 600;
			margin: 10rpx;
		}
		> view:nth-child(2) {
			font-size: 26rpx;
			color: #999;
		}
		> view:last-child {
			width: 450rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background-color: #ff604f;
			color: #fff;
			text-align: center;
			line-height: 80rpx;
		}
	}
}
// 特权
.privilege {
	padding: 40rpx;
	background-color: #f9f9f9;
	height: 810rpx;
	> view:first-child {
		margin-bottom: 30rpx;
		font-weight: 600;
		font-size: 32rpx;
	}
}
.message-left {
	display: flex;
	align-items: center;
	> image {
		width: 140rpx;
		z-index: 5;
	}
	> view {
		z-index: 5;
		margin-left: 28rpx;
		height: 140rpx;
		> view:first-child {
			font-size: 32rpx;
			margin: 20rpx 0 10rpx;
		}
		> view:last-child {
			color: #999;
			font-size: 26rpx;
		}
	}
}
.message-right {
	// background-color: red;
	padding:  24rpx;
	>view:first-child{
		font-size: 20rpx;
	}
	> view:last-child {
		padding: 8rpx 26rpx;
		background-color: #ff604f;
		text-align: center;
		border-radius: 10rpx;
		color: #fff;
		margin-top: 14rpx;
	}
}
// 优惠
.coupon {
	display: flex;
	overflow: hidden;
	border-radius: 10px;
	margin: 20rpx 0;
}
.left {
	// float:left;
	width: 250px;
	height: 85px;
	position: relative;
	box-sizing: border-box;
	padding: 15rpx 26rpx;
}
.left::before {
	content: '';
	position: absolute;
	top: -310px;
	display: block;
	right: -310px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 300px solid #fff;
	clip: rect(auto, auto, 385px, auto);
}
.left::after {
	content: '';
	position: absolute;
	bottom: -310px;
	display: block;
	right: -310px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 300px solid #fff;
	clip: rect(285px, auto, auto, auto);
}
.right {
	// float:left;
	width: 85px;
	height: 85px;
	position: relative;
}
.right::before {
	content: '';
	z-index: -1;
	position: absolute;
	top: -145px;
	display: block;
	left: -1450px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 135px solid #fff;
	clip: rect(0, auto, 220px, 145px);
}
.right::after {
	content: '';
	z-index: -1;
	position: absolute;
	bottom: -145px;
	display: block;
	left: -145px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 135px solid #fff;
	clip: rect(70px, auto, auto, 145px);
}
</style>
